

<template>
    <view class="cus-page">
        <view class="swiper com-rela">
            <!--  -->
            <view class="com-abso top com-flex com-row-between">
                <u-icon size="48rpx" @tap="detail.like=!detail.like"
                    :name="detail.like ? 'heart-fill': 'heart'"   
                    :color="detail.like ? '#FF558F': '#fff'">
                </u-icon>
                <view class="com-flex">
                    <u-icon size="64rpx" @tap="detail.chinese=!detail.chinese"
                        :name="detail.chinese ? '/static/home/details_fy.png': '/static/home/details_fy_s.png'">
                    </u-icon>
                    <view class="com-m-r-10"></view>
                    <u-icon size="64rpx" @tap="menuShow=!menuShow"
                        name="/static/home/details_more.png">
                    </u-icon>
                </view>
            </view>
            <!-- 菜单 -->
            <view v-if="menuShow" class="com-abso menu">
                <view v-for="(item,index) in menu" :key="index" class="com-flex item">
                    <u-icon size="48rpx" :name="item.icon" color="#fff" />
                    <text class="com-m-l-16 com-inverse-color">{{item.title}}</text>
                </view>
            </view>
            <!-- swiper -->
            <swiper style="height:750rpx" @change="swiperchange"
                circular 
                :autoplay="true" 
                :current="current">
				<swiper-item v-for="(item,index) in 9" :key="index">
					<view class="swiper-item uni-bg-red">
                        <image style="width:100%; height: 750rpx" mode="widthFix" src="/static/temporary/img3.jpg"></image>
                    </view>
				</swiper-item>
			</swiper>
            <!-- num -->
            <view class="type-area com-abso com-flex com-row-right num com-inverse-color">{{current+1}}/9</view>
        </view>

        <view class="type-area" style="background:#FFF">
            <view class="com-m-t-46 com-font-36 com-lh-40">宝可梦卡片正版繁中卡牌预组精灵宝可梦集换式卡片</view>
            <view class="com-m-t-20 com-flex">
                <view class="tag">二手</view>
                <view class="tag">无物流保障</view>
                <u-icon size="38rpx" name="/static/home/details_yw.png" />
            </view>
            <view class="com-m-t-30 com-flex com-col-bottom com-price-color">
                <text class="com-font-48 com-font-bold">1660</text>
                <text class="com-m-b-6">日元</text>
            </view>
            <view class="com-m-t-6 com-minor-color">约271人民币（汇率：0.0530）</view>
            <view class="com-m-t-32">
                <u-line></u-line>
            </view>
            <view class="com-m-t-30">
                <view v-for="(item,index) in detail.list1" :key="index"
                    class="com-flex com-row-between com-p-t-10 com-p-b-10 item">
                    <text class="com-minor-color">{{item.name}}</text>
                    <view class="com-flex" style="max-width:70%">
                        <view v-if="item.imgUrl" class="com-m-r-10">
                            <u-icon size="32rpx" :name="item.imgUrl" />
                        </view>
                        <text>{{item.value}}</text>
                    </view>
                </view>
            </view>
            <view class="com-m-t-32">
                <u-line></u-line>
            </view>
            <view class="com-active-color com-lh-40 com-p-t-24 com-p-b-24">
                最后一天！煤炉，乐天代购手续费减半活动进行中！快来参与吧！
            </view>
        </view>
        <u-gap height="20rpx" bgColor="#F8F8F8"></u-gap>

        <view class="type-area" style="background:#FFF">
            <view class="com-flex com-p-t-32 com-p-b-32" @tap="goSellerDetail">
                <image class="head" src="/static/temporary/img3.jpg"></image>
                <view style="flex:1">
                    <text>精神世界</text>
                    <view class="com-m-t-16 com-flex com-row-between">
                        <view class="com-flex">
                            <text class="com-font-24 com-minor-color">信誉等级：</text>
                            <u-rate size="28rpx" activeColor="#f0ad4e" :count="5" v-model="detail.count"></u-rate>
                        </view>
                        <u-icon color="#212122" name="arrow-right" size="24rpx" top="-2rpx" />
                    </view>
                    <view class="com-m-t-16 com-flex">
                        <view class="com-flex real-name" 
                            :style="{ 
                                background: detail.real ? '#fff' : '#F1F1F1',
                                border: detail.real ? '1px solid #02BDF3' : '1px solid #F1F1F1'
                            }">
                            <u-icon 
                                :color="detail.real ? '#02BDF3' : '#979797'"
                                :name="detail.real ? 'checkmark-circle-fill' : 'checkmark-circle'">
                            </u-icon>
                            <text :class="['com-m-l-10 com-font-20', detail.real ? 'com-active-color' : 'com-minor-color' ]">
                                {{detail.real ? "已实名认证" : "未实名认证"}}
                            </text>
                        </view>
                        <view class="com-flex com-m-l-45">
                            <u-icon name="twitter" color="#02BDF3"></u-icon>
                            <text class="com-m-l-12 com-font-24 com-active-color">已代购146次</text>
                        </view>
                    </view>
                </view>
            </view>
            <u-line></u-line>
            <view class="com-m-t-30 com-m-b-30">
                <view v-for="(item,index) in detail.list2" :key="index"
                    class="com-flex com-row-between com-p-t-10 com-p-b-10 item">
                    <text class="com-minor-color">{{item.name}}</text>
                    <view class="com-flex" style="max-width:70%">
                        <text>{{item.value}}</text>
                    </view>
                </view>
            </view>
        </view>
        <u-gap height="20rpx" bgColor="#F8F8F8"></u-gap>

        <view class="type-area com-p-t-32 com-p-b-32" style="background:#FFF">
            <u-subsection bgColor="#fff" fontSize="32rpx" activeColor="#02BDF3"
                :list="subsections" :current="subsectionCurrent" @change="subsectionChange">
            </u-subsection>
            <u-line></u-line>
            <view v-if="subsectionCurrent==0" class="com-m-t-32 com-m-b-32">
                <view v-for="(item,index) in detail.list3" :key="index"
                    class="com-flex com-row-between com-p-t-10 com-p-b-10 item">
                    <text class="com-minor-color">{{item.name}}</text>
                    <view class="com-flex" style="max-width:70%">
                        <text>{{item.value}}</text>
                    </view>
                </view>
            </view>
            <u-button v-if="subsectionCurrent==0" text="复制商品介绍" 
                icon="cut" iconColor="#02BDF3"
                :customStyle="{width:'100%',height:'80rpx',border: '1px solid #02BDF3', color:'#02BDF3'}"
                @click="submit">
            </u-button>
            <view v-if="subsectionCurrent==1" class="com-m-t-20">
                <view v-for="(item,index) in 9" :key="index" 
                    class="com-flex com-row-between com-p-t-30 com-p-b-30" 
                    :style="{borderBottom: index!=8 ? '1rpx solid #F8F8F8' : 'none'} ">
                    <text>{{item}}、如何使用拍拍皮代购服务？</text>
                    <u-icon size="28rpx" name="arrow-right" color="#666" />
                </view>
            </view>
        </view>
        <u-gap height="20rpx" bgColor="#F8F8F8"></u-gap>

        <view class="type-area com-p-t-32 com-p-b-32" style="background:#FFF">
            <view class="com-m-b-8 com-flex com-row-between">
                <text class="com-font-32 com-font-bold">相关商品</text>
                <view class="com-flex">
                    <text class="com-m-r-4 com-minor-color">查看更多</text>
                    <u-icon size="28rpx" name="arrow-right" color="#666" />
                </view>
            </view>
            <ct-list-n textBgColor="#f8f8f8" />
        </view>

        <!-- 底部间距 -->
        <u-gap height="30rpx" bgColor="#F8F8F8"></u-gap>

        <!-- 底部悬浮框 -->
        <view class="bottom">
            <view class="tips">购物须知：已购买的商品无法退货</view>
            <view class="com-flex com-row-between buttons">
                <view class="com-flex">
                    <view class="com-m-r-40">
                        <u-icon name="/static/home/details_kf.png" size="56rpx" />
                    </view>
                    <view class="com-rela">
                        <u-icon name="/static/home/details_gwc.png" size="56rpx" />
                        <view class="com-abso num">1</view>
                    </view>
                </view>
                <view class="com-flex">
                    <u-button text="加入购物车" shape="circle"
                        color="#fff"
                        :customStyle="{ 
                            width:'216rpx',height:'72rpx',margin:'0 24rpx 0 0',
                            fontSize:'32rpx',color:'#02BDF3',border:'1px solid #02BDF3'
                        }">
                    </u-button>
                    <u-button text="直接购买" shape="circle" @tap="popupShow=true"
                        color=" linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%)"
                        :customStyle="{width:'216rpx',height:'72rpx',margin: 0,fontSize:'32rpx',color:'#fff'}">
                    </u-button>
                </view>
            </view>
            <u-gap v-if="mixinGetSysInfo().platform == 'devtools'" height="30rpx" bgColor="#fff"></u-gap>
        </view>
        <!-- 底部安全距离 -->
        <u-gap :height="mixinGetSysInfo().platform == 'devtools' ? '206rpx' : '176rpx' " bgColor="transparent"></u-gap>

        <!-- 弹出层 -->
        <u-popup :show="popupShow" mode="center">
            <view class="popup">
                <view class="com-lh-40">
                    <text class="com-price-color">二手:</text>
                    <text class="com-minor-color">无耻到你此电脑课程的弄</text>
                </view>
                <view class="com-lh-40">
                    <text class="com-price-color">无物流保障：</text>
                    <text class="com-minor-color">称比伯成为农村从i和丑女无敌哦CDC比较迟为此成为i红包策划IC</text>
                </view>
                <u-button type="primary" shape="circle" text="确定" bgcolor="#02BDF3" @tap="popupShow=false"
                    :customStyle="{width:'240rpx', fontSize:'32rpx',marginTop:'40rpx'}">
                </u-button>
            </view>
		</u-popup>
    </view>
</template>


<script>
export default {
    name:'goodsDeail', // 商品详情
    components: {},
    props:{},

    data () {
        return {
            menu: [
                { icon: "home", title: "返回首页", url: "" },
                { icon: "bell", title: "消息中心", url: "" },
                { icon: "heart", title: "我的收藏", url: "" },
            ],
            menuShow: false,
            //swiper
            current: 0,
            // subsection
            subsections: ['商品介绍','购物说明'],
            subsectionCurrent: 0,
            // detail
            detail: {
                like: false,
                chinese: true,
                list1:[
                    { name: '来源', value: 'rakuma', imgUrl: '/static/temporary/img1.jpg' },
                    { name: '日本国内运费', value: '0日元' },
                    { name: '手续费', value: '220日元 (已包含)' },
                    { name: '国际运费', value: '在该商品到达库内称重后收取,在该商品到达库内称重后收取' },
                ],
                real: true,
                list2:[
                    { name: '商品状态', value: '接近未使用' },
                    { name: '日本国内运费', value: '卖家成段' },
                    { name: '发货地', value: '京东' },
                    { name: '物流保障', value: '无' },
                ],
                count: 3,
                list3:[
                    { name: '商品解说', value: '接近未使用' },
                    { name: '商品详细', value: '卖家成段' },
                    { name: '规格', value: '京东' },
                    { name: '其他', value: '无' },
                ],
            },
            // 弹出层
            popupShow: false,
        }
    },

    computed: {},
    watch: {},

    mounted() {},

    methods: {
        // swiperchange
        swiperchange(e){
            this.current = e.detail.current;
        },
        // 分段器
        subsectionChange(e){
            this.subsectionCurrent = e;
        },
        // 去卖家主页
        goSellerDetail(){
            uni.navigateTo({url:"/pages/home/mackey"})
        }
    },
}
</script>


<style scoped lang='scss'>
    .swiper{
        .top,.num{
            width: 100%;
            left: 0;
            padding: 32rpx;
            z-index: 10;
        }
        .top{
            top: 0;
        }
        .menu{
            top: 110rpx;
            right: 16rpx;
            z-index: 10;
            background: #595959;
            border-radius: 8rpx;
            padding: 0rpx 32rpx;
            .item{
                padding: 20rpx 0;
                border-bottom: 1px solid #7b7b7b;
                &:last-child{
                    border: none;
                }
            }
            &::after{
                content: "";
                position: absolute;
                top: -40rpx;
                right: 28rpx;
                width: 0; 
                height: 0;
                border-width: 20rpx;
                border-style: solid;
                border-color: transparent #595959 transparent transparent;
                transform: rotate(90deg); /*顺时针旋转90°*/
            }
        }
        .num{
            bottom: 0;
        }
    }
    
    .tag{
        margin-right: 16rpx;
        border-radius: 8rpx;
        padding: 8rpx 16rpx;
        background: #EAFAFF;
        font-size: 22rpx;
        color: #02BDF3;
    }

    .head{
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        margin-right: 24rpx;
    }
    .real-name{
        height: 36rpx;
        background: #FFFFFF;
        border: 1px solid #02BDF3;
        border-radius: 18rpx;
        padding-right: 16rpx;
    }

    /deep/.u-subsection--button{
        height: auto !important;
        padding: 22rpx 3px 32rpx !important;
    }
    /deep/.u-subsection--button__bar{
        &:after{
            content: "";
            width: 60rpx;
            height: 6rpx;
            background: #02BDF3;
            border-radius: 4rpx;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            bottom: -32rpx;
        }
    }

    .bottom{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
        .tips{
            width: 100%;
            height: 64rpx;
            background: #EAFAFF;
            font-size: 24rpx;
            color: #02BDF3;
            text-align: center;
            line-height: 64rpx;
        }
        .buttons{
            padding: 20rpx 32rpx;
            background: #fff;
        }
        .num{
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
            background: #FF558F;
            font-size: 20rpx;
            color: #fff;
            top: -14rpx;
            right: -18rpx;
            text-align: center;
            line-height: 36rpx;
        }
    }

    /deep/.u-popup__content{
        border-radius: 16rpx;
        .popup{
            width: 590rpx;
            padding: 56rpx 56rpx 40rpx 56rpx;
        }
    }
</style>